<template>
  <div>
    <el-form
      ref="chForm"
      :model="chForm"
      :rules="chRules"
    >
      <el-row style="font-size: 18px">
        您登录的<span style="color: indianred">账号</span>绑定的手机号为:
      </el-row>
      <el-row type="flex" align="middle" style="margin-bottom: 4px">
        <span class="my-phone-box"><i class="el-icon-mobile-phone" />{{ phoneNumber }}</span>
      </el-row>
      <el-row style="font-size: 18px">
        点击发送<span style="color: indianred">验证码</span>，验证完成后可以修改密码
      </el-row>
      <el-form-item prop="code" style="margin-top: 15px">
        <el-input v-model="chForm.code" type="text" autocomplete="off" placeholder="请输入短信验证码">
          <el-button slot="prepend" :disabled="messageStat" type="primary" @click="freshMessageText">{{ getCodeMessage }}</el-button>
        </el-input>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button type="primary" style="width: 100%" @click="nextStep">下一步</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>

import { validateVerifyCode } from '@/utils/validate-tools'

export default {
  name: 'StudentBaseInfoPassword',
  data() {
    return {
      getCodeMessages: '发送验证码',
      messageStat: false,
      phoneNumber: '136*****228',
      chForm: {
        code: ''
      },
      chRules: {
        code: [{ require: true, trigger: 'blur', validator: validateVerifyCode }]
      }
    }
  },
  computed: {
    getCodeMessage() {
      return this.getCodeMessages
    }
  },
  methods: {
    freshMessageText() {
      const that = this
      let nowTime = 59
      this.messageStat = true
      const interval = setInterval(() => {
        that.getCodeMessages = '重新发送(' + nowTime + ')'
        if (nowTime === 0) {
          that.messageStat = false
          that.getCodeMessages = '发送短信验证码'
          clearInterval(interval)
        }
        nowTime--
      }, 1000)
    },
    nextStep() {
      this.$emit('stepChangeEvent', 2)
      this.$refs.chForm.resetFields()
    },
    clearAllData() {
      this.$refs.chForm.resetFields()
    }
  }
}
</script>

<style scoped>
.my-phone-box {
  border: #8c939d 1px solid;
  background-color: #fafafa;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
  padding: 10px;
  border-radius: 5px;
  line-height: 5px;
}
</style>
